<template>
    <div>

        <div>
            <el-input class="Search" v-model="input_position" placeholder="搜索职位、公司"></el-input>
            <el-button icon="el-icon-search" @click="searchForPosition">搜索</el-button>
        </div>
        <div class="Select">
            <el-select v-model="Company_type_Selected" placeholder="公司类型" size="small">
                <el-option v-for="item in Company_type" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
            <el-select v-model="Education_Selected" placeholder="学历要求" size="small">
                <el-option v-for="item in Education" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
            <!-- <el-select v-model="Salary_Selected" placeholder="薪资水平" size="small">
                <el-option v-for="item in Salary" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select> -->
            <el-select v-model="CompanyCity_Selected" placeholder="工作城市" size="small">
                <el-option v-for="item in CompanyCity" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
        </div>

        <div v-for="item in CompanyList" :key="item.recruitId" class="Company-item"
            @click="toJobDetails(item.recruitId, item.companyAccount)">
            <div class="position">{{ item.recruitName }}</div>
            <div class="salary">{{ item.wage }}</div>
            <div class="education">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-xueshimao"></use>
                </svg>
                {{ item.education }}
            </div>
            <div class="activity_1">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-caidan"></use>
                </svg>
                {{ item.workAction1 }}
            </div>
            <div class="activity_2">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-caidan"></use>
                </svg>
                {{ item.workAction2 }}
            </div>
            <div class="name">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-loufang"></use>
                </svg>
                {{ item.companyName }}
            </div>
            <div class="type">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-gongwenbao"></use>
                </svg>
                {{ item.companyType }}
            </div>
            <div class="city">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-loufang1"></use>
                </svg>
                {{ item.companyCity }}
            </div>
        </div>
        <div class="page">
            <el-pagination layout="prev, pager, next" :total="40" :current-page="currentPage"
                @current-change="handlePageChange">
            </el-pagination>
        </div>
    </div>
</template>
<script>

import axios from 'D:\\job_management\\src\\axiosConfig.js'
export default {
    data() {
        return {
            input_position: '',
            Company_type: [{
                value: '互联网',
                label: '互联网'
            }, {
                value: '服务行业',
                label: '服务行业'
            },],
            Education: [{
                value: '专科',
                label: '专科'
            }, {
                value: '本科',
                label: '本科'
            },
            {
                value: '硕士',
                label: '硕士'
            },
            {
                value: '博士',
                label: '博士'
            },
            {
                value: '其他',
                label: '其他'
            },
            ],
            // Salary: [{
            //     value: '选项1',
            //     label: '3k以下'
            // }, {
            //     value: '选项2',
            //     label: '3k-5k'
            // },

            // ],
            CompanyCity: [
                {
                    value: '北京',
                    label: '北京'
                }, {
                    value: '上海',
                    label: '上海'
                },
                {
                    value: '深圳',
                    label: '深圳'
                },
                {
                    value: '武汉',
                    label: '武汉'
                },

            ],

            Company_type_Selected: '',
            Education_Selected: '',
            Salary_Selected: '',
            CompanyCity_Selected: '',


            CompanyList: [
                {
                    recruitId: 1,
                    recruitName: '抖音达人',
                    wage: '10-11k',
                    education: '专科',
                    workAction1: '发布热门视频',
                    workAction2: '熟悉热点，追踪热点',
                    companyType: '服务行业',
                    companyCity: '广州',
                    companyName: '美团'
                },
                {

                },
                {

                },
                {

                },
            ],
            needPage: 1,
            currentPage: 1

        }
    },
    mounted() {
        if (this.$store.state.IsSeeker === true) {
            axios.post(`/seekers/recommend/${this.needPage}`,
                {



                },
            )
                .then(response => {
                    this.$data.CompanyList = response.data.data;
                })
                .catch(error => {
                    console.log(error);
                })
        }
        else {
            axios.get(`company/market`,
                {
                    params: {
                        pageSize: 4,
                        pageNum: this.needPage
                    }
                }).then(res => {
                    // for (let i = 0; i < res.data.length; i++) {
                    //     this.CompanyList[i].recruitId = res.data.company_marketInfo[i].recruitId,
                    //         this.CompanyList[i].recruitName = res.data.company_marketInfo[i].recruitName,
                    //         this.CompanyList[i].wage = res.data.company_marketInfo[i].wage,
                    //         this.CompanyList[i].education = res.data.company_marketInfo[i].education,
                    //         this.CompanyList[i].workAction1 = res.data.company_marketInfo[i].workAction1,
                    //         this.CompanyList[i].workAction2 = res.data.company_marketInfo[i].workAction2,
                    //         this.CompanyList[i].companyType = res.data.company_marketInfo[i].companyType,
                    //         this.CompanyList[i].companyCity = res.data.company_marketInfo[i].companyCity,
                    //         this.CompanyList[i].companyName = res.data.company_marketInfo[i].companyName


                    // }
                    this.CompanyList = res.data.data.company_marketInfo
                }
                )
        }

    },
    methods: {
        searchForPosition() {
            console.log(this.CompanyCity_Selected);
            axios.post(`/seekers/recommend`,
                {
                    recruit_name: this.input_position,
                    company_city: this.CompanyCity_Selected,
                    company_type: this.Company_type_Selected,
                    education: this.Education_Selected,
                    wage: this.Salary_Selected,
                    pageNum: this.currentPage,
                },

            )
                .then(response => {
                    this.$data.CompanyList = response.data.data;
                })
                .catch(error => {
                    console.log(error);
                })
        },

        toJobDetails(Id, companyaccount) {
            this.$store.commit('updateRecruitId', Id)
            this.$store.commit('changeCompanyAccount', companyaccount)
            this.$router.push('JobDetails')
        },
        handlePageChange(currentPage) {
            this.needPage = currentPage;
            if (this.$store.state.IsSeeker === true) {
                axios.post(`/seekers/recommend/${this.needPage}`,
                    {

                    },

                )
                    .then(response => {

                        this.$data.CompanyList = response.data.data;
                    })
                    .catch(error => {
                        console.log(error);
                    })
            }
            else {
                axios.get(`company/market`,
                    {
                        params: {
                            pageSize: 4,
                            pageNum: this.needPage
                        }
                    }).then(res => {
                        this.CompanyList = res.data.company_marketInfo
                    }
                    )
            }
        }


    }
}

</script>
<style scoped>
.icon {
    width: 4em;
    height: 4em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
    font-size: 7px;
}



.Search {
    width: 800px;
    margin-left: 50px;
}

.Select {
    margin-top: 5px;
    padding-left: 20px;
}

.Select>* {
    margin-left: 5px;
}





.Company-item {
    position: relative;
    width: 75%;
    height: 200px;
    background-color: #fff;
    margin-top: 20px;
    margin-left: 200px;
    border-radius: 30px;
    cursor: pointer;
    transition: box-shadow 0.5s ease-in-out;
}

.Company-item:hover {

    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.1);
}

.Company-item:hover .position {
    color: rgb(0, 180, 179);
}

.position {
    position: absolute;
    left: 40px;
    font-weight: 700;
    font-size: 22px;
    transition: color, 0.2s ease-in-out;
}

.salary {
    position: absolute;
    top: 5px;
    left: 200px;
    font-weight: 600;
    color: #ff0000;
    font-size: 20px;
}

.education {
    position: absolute;
    top: 60px;
    left: 50px;
}

.activity_1 {
    position: absolute;
    top: 60px;
    left: 200px;

}

.activity_2 {
    position: absolute;
    top: 60px;
    left: 420px;
}

.name {
    position: absolute;
    top: 120px;
    left: 50px;
}

.type {
    position: absolute;
    top: 120px;
    left: 420px;
}

.city {
    position: absolute;
    top: 120px;
    left: 650px;
}

.page {
    margin-top: 30px;
}
</style>